import BaseComponent from "../../app/baseComponent";
import forEach from "lodash/forEach";

class CascadeMenu extends BaseComponent {
    constructor(name) {
        super(name);
        this.methods = {
            onItemClick(e, level, sublevel) {
                e.preventDefault();
                e.stopPropagation();
                var self = this;
                var optionindex = e.target.getAttribute("optionindex");
                var option = self.levels[level].options[optionindex];
                var currentLi = self.getLi(e);
                if (option && option.value != window.AUI.EMPTY) {
                    if (!self.levels[level].disabled) {
                        self.levels[level].disabled = true;
                        self.levels[level].selectOptionIndex = optionindex;
                        forEach(self.levels, function (v, index) {
                            if (index > level) {
                                if (self.levels[index].active) {
                                    self.hideLevel(index);
                                }
                            }
                        });
                        if (sublevel < self.levels.length) {
                            self.levels[sublevel].offsetTop = self.calcOffsetTop(currentLi, self.levels[level]);
                            self.getOptions(level, sublevel, option, optionindex).then(function (options) {
                                self.levels[level].disabled = false;
                                self.levels[sublevel].options = options;
                                if (self.levels[0].active) {
                                    if (options.length > 0) {
                                        self.showLevel(sublevel);
                                    }
                                }
                            }).catch(function (e) {
                                self.levels[level].disabled = false;
                            });
                        }
                        if (sublevel == self.levels.length) {
                            self.onSelectEnd(option);
                        }
                    }
                } else {
                    self.onSelectEnd(option);
                }
            },
            getLi(e) {
                return e.target.parentNode;
            },
            calcOffsetTop(currentLi, currentlevel) {
                var self = this;
                var ret = currentLi.offsetTop - currentLi.parentNode.scrollTop - currentlevel.paddingTop;
                if (ret < 0) {
                    ret = 0;
                }
                return ret;
            },
            getTransform(level) {
                var totaltop = 0;
                for (var i = 0; i < level + 1; i++) {
                    totaltop += this.levels[i].offsetTop;
                }
                return `translateX(${level * 100}%) translateY(${totaltop}px)`;
            },
            showLevel(level) {
                var self = this;
                self.levels[level].style.transform = self.getTransform(level);
                self.levels[level].active = true;
            },
            hideLevel(level) {
                var self = this;
                self.levels[level].active = false;
            },
            getOptions(level, sublevel, option, optionindex) {
                return new Promise(function (resolve, reject) {
                    resolve([{
                        label: "暂无数据",
                        value: window.AUI.EMPTY
                    }]);
                })
            },
            createLevel() {
                return  {
                    active: false,
                    style: {
                        transform: "translateX(0) translateY(0)"
                    },
                    offsetTop: 0,
                    paddingTop: 0,
                    selectOptionIndex: -1,
                    disabled: false,
                    options: [
                    ]
                }
            },
            close() {
                var self = this;
                forEach(self.levels, function (v, index) {
                    v.disabled = false;
                    v.selectOptionIndex = -1;
                    if (index > 0) {
                        v.active = false;
                    }
                });
            },
            onSelectEnd(option) {
                var self = this;
                self.close();
            }
        };
    }
    _template() {
        var self = this;
        return `
<div class="${self._name}">
    <ul v-for="level,levelindex in levels" :ref="'menu'+levelindex" :aui-level="levelindex + 1" :aui-active="level.active" :disabled="level.disabled" :style="level.style" class="aui-dropdown-menu">
        <li v-for="option,index in level.options" :aui-selected="level.selectOptionIndex == index"><a href="" :optionindex="index" @click="onItemClick($event, levelindex, levelindex+1)">{{option.label}}</a></li>       
    </ul>                       
</div> 
`;
    }
    _data() {
        var ret = {};
        ret.levels = [];
        ret.defaultOption = {
            label: "暂无数据",
            value: window.AUI.EMPTY
        };
        return ret;
    }
    _mounted() {
        var self = this;
        self.anuElement = {};
        forEach(self.$refs, function (v, k) {
            var index = k.replace("menu", "");
            self.levels[index].paddingTop = parseFloat(window.getComputedStyle(v[0])["padding-top"]);
        });
    }
}

export default CascadeMenu;